{% extends 'base.html' %}
{% block breadcrumb_current %}
    设备管理 > 审批设备调整申请
{% endblock %}
{% block content %}

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            审批设备调整申请
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end">返回首页</a></h5>
    </div>
    <div class="container mt-4">
        <!-- 表格展示，初始隐藏 -->
        <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
            <thead>
                <tr>
                    <th>设备调整计划</th>
                    <th>调整原因</th>
                    <th>申请人</th>
                    <th>设备现状</th>
                    <th>调整历史</th>
                    <th>审批</th>
                </tr>
            </thead>
            <tbody>
                {% for record in pending_records %}
                <tr class="custom-row-color">
                    <td>{{ record.placebefore }} > {{ record.placenow }}；{{ record.get_statebefore_display }} > {{ record.get_statenow_display }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.operator.realname }}{{ record.create_date|date:"Y-m-d" }}</td>
                    <td><a href="{% url 'device_detail_pending' record.number %}" class="text-info text-decoration-none">查看</a></td>
                    <td><a href="{% url 'pendingdevicehistory_detail' record.number %}" class="text-info text-decoration-none">查看</a></td>
                    <td>
                        <form method="post" action="{% url 'approve_device' record.id %}">
                            {% csrf_token %}
                            <div class="mb-1">
                                <input type="text" name="approval_opinion" class="form-control w-50" id="approval_opinion_{{ record.id }}" placeholder="请输入审批意见">
                            </div>
                            <button type="submit" name="action" value="approve" class="btn btn-success btn-sm" style="margin-left: 15px;">同意</button>
                            <button type="submit" name="action" value="reject" class="btn btn-danger btn-sm" style="margin-left: 20px;">拒绝</button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="9">暂无待审批的设备调整申请</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- 卡片展示，初始隐藏 -->
        <div id="mobile-view" style="display: none;">
            {% for record in pending_records %}
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">设备调整计划</h5>
                    <p class="card-text">
                        <strong>位置调整:</strong> {{ record.placebefore }} > {{ record.placenow }}<br>
                        <strong>状态调整:</strong> {{ record.get_statebefore_display }} > {{ record.get_statenow_display }}<br>
                        <strong>调整原因:</strong> {{ record.reason }}<br>
                        <strong>申请人:</strong> {{ record.operator.realname }}{{ record.create_date|date:"Y-m-d" }}
                    </p>
                    <a href="{% url 'device_detail_pending' record.number %}" class="btn btn-info mb-2">查看设备现状</a>
                    <a href="{% url 'pendingdevicehistory_detail' record.number %}" class="btn btn-info mb-2">查看调整历史</a>
                    <form method="post" action="{% url 'approve_device' record.id %}">
                        {% csrf_token %}
                        <div class="mb-1">
                            <input type="text" name="approval_opinion" class="form-control" id="approval_opinion_{{ record.id }}" placeholder="请输入审批意见">
                        </div>
                        <button type="submit" name="action" value="approve" class="btn btn-success me-2">同意</button>
                        <button type="submit" name="action" value="reject" class="btn btn-danger">拒绝</button>
                    </form>
                </div>
            </div>
            {% empty %}
            <div class="card mb-3">
                <div class="card-body text-center">
                    暂无待审批的设备调整申请
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 设备检测脚本 -->
        <script>
            function isMobile() {
                return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            }

            document.addEventListener('DOMContentLoaded', function() {
                const desktopView = document.getElementById('desktop-view');
                const mobileView = document.getElementById('mobile-view');

                if (isMobile()) {
                    mobileView.style.display = 'block';
                } else {
                    desktopView.style.display = 'table';
                }
            });
        </script>
    </div>
{% endblock %}